<template>
    <div class="order-view">
        <!-- <el-button type="text" size="small" @click="dialogUnitUpdVisible = true">编辑</el-button> -->
        <el-button
            size="mini"
            type="danger"
            @click="startEdit()">编辑</el-button>
        <el-drawer
          title="单位修改"
          :before-close="handleClose"
          :visible.sync="dialogUnitUpdVisible"
          direction="rtl"
          custom-class="demo-drawer"
          ref="drawer"
          :modal-append-to-body="false"
          >
          <div class="demo-drawer__content">
            <el-form :model="unitForm" ref="unitForm">
              <el-form-item label="单位名称: " prop="unitForm" :label-width="formLabelWidth">
                <el-input v-model="unitForm.unitName" autocomplete="off"></el-input>
              </el-form-item>
            </el-form>
            <div class="demo-drawer__footer" align="center">
              <el-button @click="dialogUnitUpdVisible = false">取 消</el-button>
              <el-button type="primary" @click="updateUnit" :loading="loading">{{ loading ? '提交中 ...' : '确 定' }}</el-button>
            </div>
          </div>
        </el-drawer>
    </div>
  </template>
  
  <script>
  
  export default {
    name: "UpdateGoodUnit",
    props: {
      unitId: {
        type: Number,
        required: true
      }
    },
    data() {
      return {
        dialogUnitUpdVisible: false,
        loading: false,
        unitForm: {
          unitName:'',
        },
        formLabelWidth: '80px'
      };
    },
    created() { 
      this.getUnitById(this.unitId);
    },
  
    mounted() {
    },
    methods: {
      startEdit(){
        // alert("startEdit");
        this.dialogUnitUpdVisible=true;
        this.getUnitById(this.unitId);
      },
      getUnitById(unitId) {
        this.$http({
          url:"http://localhost:8086/getUnitById",
          method:"post",
          params:{
            id:unitId
          }
        }).then(res=>{
          if(res.data.code == '200'){
            this.unitForm = res.data.data;
          }else{
            alert(res.data.msg);
          }
        })
      },
      handleClose() { 
        this.dialogUnitUpdVisible = false;
      },
      updateUnit(){
        if(this.unitForm.unitName == ''){
          alert("单位名称不能为空");
          return;
        }
        if (this.loading) {
          return;
        }
        this.loading = true;
        this.$http({
          url:"http://localhost:8086/updUnit",
          method:"post",
          data:{
            id:this.unitId,
            unitName:this.unitForm.unitName,
            modifyBy:1
          }
        }).then(res=>{
          if(res.data.code == '200'){
            this.$message.success("修改成功");
            this.$emit("childClick");
            this.dialogUnitUpdVisible = false;
            this.loading = false;
          }else if(res.data.code == '501'){
            this.$message.error(res.data.message);
            this.loading = false;
          }
        })
      }
      // updateProduct() {
      //   if (this.loading) {
      //     return;
      //   }
      //   this.loading = true;
      //   this.timer = setTimeout(() => {
      //     // 动画关闭需要一定的时间
      //     setTimeout(() => {
      //       this.loading = false;
      //       this.dialogUnitUpdVisible = false;
      //     }, 400)
      //   }, 2000);
      // },
    },
  };
  </script>
  
  <style lang="scss">
  
  </style>